<!DOCTYPE html>
<html>
<head>
    <title>添加到购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates"/>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="../js/jsencrypt.min.js"></script>
    <script src="../js/api.js"></script>
    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>

</head>
<body>
<div>
    <h1>添加到购物车</h1>
    <div id="goods_info"></div>
    <table class="gridtable">
        <tbody id="tbody1">
        </tbody>
    </table>
    <br/>
</div>
<div style="float: right">
    <button onclick="login()">登录</button>
</div>
<br/>
<hr/>
<h1>我的购物车</h1>
<table class="gridtable">
    <tbody id="tbody2">
    </tbody>
</table>
<input type="text" id="carts_id"/>
<button onclick="xiadan()">下单</button>
<script>

    $(function () {
        getGoodsInfo();
        getCartInfo();
    })

    function login() {
        var json = {
            "username": "admin",
            "password": "12345678"
        };
        var params = JSON.stringify(json).replace(/:/g, "=").replace(/"/g, "").replace(/ /g, "");
        var data = request("user_login", "", "0", json, params);
        console.log(data);
    }

    function purchase(goodsId) {
        var goods_number = $("#goods_number_" + goodsId).val();
        window.location.href = "http://localhost:9090/rest/views/submit_order.html?goods_id=" + encodeURI(goodsId) + "&goods_number=" + encodeURI(goods_number);
    }

    function xiadan() {
        var cartIds = $("#carts_id").val();
        window.location.href = "http://localhost:9090/rest/views/submit_order.html?cart_id=" + encodeURI(cartIds);
    }

    function getGoodsInfo() {

        var json = {};
        var params = JSON.stringify(json).replace(/:/g, "=").replace(/"/g, "").replace(/ /g, "");
        var data = request("goods_list", "", "0", json, params);
        var dataList = data.dataList;

        console.log(dataList);

        var tableData = "<tr><th>商品ID</th>" +
            "<th>商品名称</th>" +
            "<th>商品标题</th>" +
            "<th>商品主图</th>" +
            "<th>商品描述</th>" +
            "<th>商品价格</th>" +
            "<th>商品库存</th>" +
            "<th>上架时间</th>" +
            "<th>修改时间</th>" +
            "<th>数量</th>" +
            "<th>操作</th></tr>";
        //动态增加5个td,并且把data数组的五个值赋给每个td
        for (var i = 0; i < dataList.length; i++) {
            tableData += "<tr>";
            tableData += "<td>" + dataList[i].goodsId + "</td>";
            tableData += "<td>" + dataList[i].goodsName + "</td>";
            tableData += "<td>" + dataList[i].goodsTitle + "</td>";
            tableData += "<td>" + dataList[i].goodsImg + "</td>";
            tableData += "<td>" + dataList[i].goodsDetail + "</td>";
            tableData += "<td>" + dataList[i].goodsPrice + "</td>";
            tableData += "<td>" + dataList[i].goodsStock + "</td>";
            tableData += "<td>" + dataList[i].dateCreated + "</td>";
            tableData += "<td>" + dataList[i].dateUpdated + "</td>";
            tableData += "<td><button onclick='add(" + dataList[i].goodsId + ")'>+</button>&nbsp;&nbsp;<input style='width:30px;text-align: center' type='text' id='goods_number_" + dataList[i].goodsId + "' value='1'/>&nbsp;&nbsp;<button onclick='subtract(" + dataList[i].goodsId + ")'>-</button></td>";
            tableData += "<td><button onclick='addCart(" + dataList[i].goodsId + ")'>加入购物车</button><button onclick='purchase(" + dataList[i].goodsId + ")'>购买</button></td>";
            tableData += "</tr>";
        }
        //现在tableData已经生成好了，把他赋值给上面的tbody
        document.getElementById("tbody1").innerHTML = tableData;
    }

    function add(goodsId) {
        var goodsNumber = $("#goods_number_" + goodsId).val();
        $("#goods_number_" + goodsId).val(parseInt(goodsNumber) + 1);
    }

    function subtract(goodsId) {
        var goodsNumber = $("#goods_number_" + goodsId).val();
        if (goodsNumber > 1) {
            $("#goods_number_" + goodsId).val(parseInt(goodsNumber) - 1);
        }
    }

    function addCart(goodsId) {
        var json = {
            "goods_id": goodsId,
            "goods_number": $("#goods_number_" + goodsId).val()
        };
        var params = JSON.stringify(json).replace(/:/g, "=").replace(/"/g, "").replace(/ /g, "");
        var data = request("cart_addCart", "c64075fdaa954ccb8129a01a31060fa6", "10000", json, params);

        console.log(data);

        $("#goods_number_" + goodsId).val('1');
        //下单成功选择支付方式
        getCartInfo();

    }

    function getCartInfo() {
        var json = {};
        var params = JSON.stringify(json).replace(/:/g, "=").replace(/"/g, "").replace(/ /g, "");
        var data = request("cart_list", "c64075fdaa954ccb8129a01a31060fa6", "10000", json, params);
        var dataList = data.dataList;

        console.log(dataList);

        var cartIds = "";
        var tableData = "<tr><th>购物车ID</th>" +
            "<th>用户ID</th>" +
            "<th>商品ID</th>" +
            "<th>商品数量</th><th>操作</th></tr>";
        //动态增加5个td,并且把data数组的五个值赋给每个td
        for (var i = 0; i < dataList.length; i++) {
            tableData += "<tr id='" + dataList[i].cartId + "'>";
            tableData += "<td>" + dataList[i].cartId + "</td>";
            tableData += "<td>" + dataList[i].userId + "</td>";
            tableData += "<td>" + dataList[i].goodsId + "</td>";
            tableData += "<td>" + dataList[i].goodsNumber + "</td>";
            tableData += "<td><button onclick='delCart(" + dataList[i].cartId + ")'>删除</button></td>";
            tableData += "</tr>";
            cartIds += dataList[i].cartId + ",";
        }
        //现在tableData已经生成好了，把他赋值给上面的tbody
        console.log(tableData);
        document.getElementById("tbody2").innerHTML = tableData;
        $("#carts_id").val(cartIds.substring(0, cartIds.length - 1));
    }

    function delCart(cartId) {
        var json = {
            "cartId": cartId
        };
        var params = JSON.stringify(json).replace(/:/g, "=").replace(/"/g, "").replace(/ /g, "");
        var data = request("cart_delCart", "c64075fdaa954ccb8129a01a31060fa6", "10000", json, params);
        var dataList = data.dataList;

        $("#" + cartId).html("");

        var cartIds = "";
        //动态增加5个td,并且把data数组的五个值赋给每个td
        for (var i = 0; i < dataList.length; i++) {
            cartIds += dataList[i].cartId + ",";
        }
        //现在tableData已经生成好了，把他赋值给上面的tbody
        console.log(cartIds);
        $("#carts_id").val(cartIds.substring(0, cartIds.length - 1));
    }

</script>
</body>
</html>